<template>
  <div class="app-container">
    <virtualList :data="data" class="u-f u-f-spa u-f-aja" :containerHeight="virtualListHeight" >
      <template #default="row">
          {{row}}
<!--        <div class="listItem u-f u-f-ac u-f-spa" >-->
<!--          {{row.data.id}}-->
<!--        </div>-->
      </template>
    </virtualList>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, ref} from "vue";

let once = ref(0)//每次插入的数量
let total = ref(0)//总条数
let countRender = ref(0)//已经渲染次数
let loopCount = ref(0)//需要插入的次数
let data = ref<any>([])
let virtualListHeight = ref("")


const handleInit = () => {
  data.value.length = 0;
  setTimeout(()=>{
    // 百万条数据
    total.value = 100;
    // 单次插入 可自定义
    once.value = 20;
    // 需要插入的次数 向上取整
    loopCount.value = Math.ceil(total.value / once.value);
    // 当前渲染次数
    countRender.value = 0;
    handleRender();
  },500)
}
//百万数据分段插入
const handleRender = () => {
  for (let i = 0; i < once.value; i++) {
    data.value.push({id:countRender.value+'-'+i})
  }
  // 渲染次数加1，控制递归的次数
  countRender.value++;
  let windowsObj = window as any
  if (countRender.value < loopCount.value) {
      windowsObj.requestAnimationFrame(handleRender);
  }
}
onMounted(()=>{
  virtualListHeight.value = (document.documentElement.offsetHeight-200)+"px"
  handleInit()
})
</script>

<style scoped lang="less">
.app-container{
  background-color: gray;
  height:500px;
  width: 500px;
}
.listItem{
  border-bottom:1px solid red;
  padding:10px;
}
</style>
